<script setup>

// const weChatCode = (e) => {
//     e.preventDefault()
// }
</script>

<template>
    <div class="page">
        <div class="download">
            <div class="download-item">
                <img class="download-item-img" src="../../assets/rjxz_icon_01.png" alt="">
                <p>矩阵账号绑定插件</p>
                <a class="btn btn-primary download-item-btn" href="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/exe/auto.rar" role="button">下载</a>
            </div>
            <!-- <div class="download-item">
                <img class="download-item-img" src="../../assets/rjxz_icon_02.png" alt="">
                <p>店店有客剪辑软件</p>
                <a @click="weChatCode" class="btn btn-primary download-item-btn" href="" role="button">下载</a>
            </div> -->
        </div>
        <!-- Modal -->
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
        </div>
    </div>

    
</template>

<style lang='scss' scoped>
    .page{
        .download{
            display: flex;
            align-items: center;
            padding: 147px 39px;
            .download-item{
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 20rem;
                height: 24rem;
                border-radius: 20px;
                box-shadow:0px 5px 20px rgba(0, 0, 0, .1);
                transition: all .3s;
                font-size: 24px;
                color: rgb(48,49,51);
                margin-right: 20px;
                &:hover{
                    transform: translate(-5px, -5px);
                }
                .download-item-img{
                    width: 120px;
                    height: 116px;
                    margin: 52px 0 22px;
                }
                .download-item-btn{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 200px;
                    height: 60px;
                    background-color: rgb(72,128,255);
                    color: #fff;
                    font-size: 24px;
                    border-radius: 12px;
                }
            }
        }
        
    }
</style>